<template>
  <el-dialog :close-on-click-modal="false"  v-model="isShow">
    <template #title>
      <div class="card-header">
        <i
            class="el-icon-edit-outline title-icon"
        ></i>
        <span class="title-font">{{title}}</span>
      </div>
      <el-divider></el-divider>
    </template>
    <el-transfer
        v-model="dataForm.roleList"
        v-loading="dataLoading"
        style="width: 100%"
        @change="changeRole"
        filterable
        :props="props"
        :titles="['剩余角色', '已赋值']"
        :filter-method="filterMethod"
        filter-placeholder="请输入角色名称"
        :data="roleData"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button v-loading="loading" @click="close">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {NuoRoleController, NuoUserRoleController} from "@/actions/controller";
import {VueUtil} from "@/util";

export default {
  name: "user-role-dialog",
  data(){
    return {
      isShow: false,
      title: '',
      loading: false,
      dataForm:{
        roleList: []
      },
      roleData: [],
      dataLoading: false,
      props:{
        key: 'id',
        label: 'roleName'
      },
      userId: ''
    }
  },
  mounted() {
  },
  methods:{
    init(title,userId,data){
      this.title = title
      if(data){
        this.dataForm.roleList = data
      }
      this.getAllRole()
      this.userId = userId
      this.isShow = true
    },
    getAllRole(){
      this.dataLoading = true
       VueUtil(this).ajax(NuoRoleController.queryRoleAll).then(res=>{
         this.roleData = res.data
         this.dataLoading = false
       }).catch(()=>{
         this.dataLoading = false
       })
    },
    changeRole(value){
      this.dataLoading = true
      VueUtil(this).ajax(NuoUserRoleController.saveRoleUser,{userId:this.userId,roleIds:value}).then(res=>{
        VueUtil(this).hint(res.message)
        this.dataLoading = false
      }).catch(()=>{
        this.dataLoading = false
      })

    },
    close(){
      Object.assign(this.$data, this.$options.data());
    },
    filterMethod(query, item) {
      return item.roleName.indexOf(query) != -1
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel{
  width: 40%;
}
</style>